<template>
  <div class="chatcontainer">
    <div class="flex h_full">
      <!-- 聊天用户列表 -->
      <div class="chatside bg_fff p_relative flexcolumn">
        <el-tabs type="border-card" class="eltabs flexcolumn">
          <el-tab-pane label="私聊消息">
            <chat-list
              :type="1"
              :useritem="rowitem"
              @selectFreiend="selectFreiend"
            />
          </el-tab-pane>
          <el-tab-pane label="群聊消息">
            <chat-list
              :type="2"
              :useritem="rowitem"
              @selectFreiend="selectFreiend"
            />
          </el-tab-pane>
        </el-tabs>
      </div>
      <!-- 聊天记录面板 -->
      <div class="chatwindow">
        <chat-record
          v-if="friendItem"
          :key="chatkeys"
          :useritem="rowitem"
          :friendItem="friendItem"
        />
      </div>
      <!-- 聊天右侧搜索记录 -->
      <div
        class="chatright bg_fff p_relative"
        :class="{ hiddenright: warrper }"
      >
        <div
          v-if="warrper"
          class="rightbox commhover f-12 c_fff textcenter"
          @click="handleWrap(false)"
        >
          <i class="el-icon-search"></i>
          <span>搜索聊天记录</span>
        </div>
        <div
          v-else
          class="rightbox2 commhover f-12 c_fff textcenter"
          @click="handleWrap(true)"
        >
          <i class="el-icon-caret-right"></i>
        </div>
        <div v-if="warrper" class="riline"></div>
        <chat-right :useritem="rowitem" />
      </div>
    </div>
  </div>
</template>
<script>
import ChatList from "./components/ChatList.vue";
import ChatRight from "./ChatRight.vue";
import ChatRecord from "./ChatRecord.vue";
// import ChatleftHeader from "./components/ChatleftHeader.vue";
export default {
  data() {
    return {
      // 选择的好友
      friendItem: null,
      warrper: false,
      chatkeys: "",
    };
  },
  components: {
    ChatList,
    ChatRight,
    ChatRecord,
  },
  created() {
    console.log("rowitem:", this.rowitem);
    this.getList();
  },
  props: {
    rowitem: {
      type: Object,
      default: {},
    },
  },
  methods: {
    getList() {
      console.log("获取内容");
    },

    selectFreiend(item) {
      console.log("item:", item);
      this.friendItem = item;
      this.chatkeys = new Date().getTime();
    },

    handleWrap(val) {
      this.warrper = val;
    },
  },
};
</script>
<style lang="scss" scoped>
.chatcontainer {
  width: calc(100vw - 260px);
  height: 100%;
}
.emptyimg {
  width: 90px;
  height: 90px;
}
.emptybox {
  margin-top: -50px;
}
.chatside {
  width: 300px;
}
.chatwindow {
  flex: 1;
  position: relative;
  border-left: 1px solid #e9e9e9;
  border-right: 1px solid #e9e9e9;
}
.chatright {
  width: 320px;
  transition: all 0.6s;

  &.hiddenright {
    width: 0;
    transform: translateX(100%);
    border-left: 1px solid #e9e9e9;
  }
}
.el-tabs {
  height: 100%;
}
.el-tabs--border-card {
  box-shadow: none;
  border: 0;
}
::v-deep .el-tabs__content {
  flex: 1;
  padding: 0;
}
.eltabs {
  ::v-deep .el-tabs__header {
    background-color: #f9f9f9;

    .el-tabs__item.is-active {
      background-color: #f5f5f5;
    }
  }
  ::v-deep .el-tab-pane {
    height: 100%;
  }
}

.rightbox {
  width: 22px;
  height: 140px;
  margin-top: -50px;
  padding-top: 5px;
  padding-left: 6px;
  line-height: 1.5;
  background: #7e8494;
  position: absolute;
  top: 50%;
  left: -25px;
  border-radius: 3px 0 0 3px;
  transition: all 0.5s;
}
.rightbox2 {
  position: absolute;
  top: 50%;
  left: -12px;
  margin-top: -12px;
  width: 12px;
  height: 50px;
  line-height: 50px;
  color: #fff;
  border-radius: 3px 0 0 3px;
  text-align: center;
  font-size: 12px;
  transition: all 0.5s;
  cursor: pointer;
  background: #6a6f7d;
}
.riline {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 4px;
  left: -4px;
  background: #7e8494;
  transition: all 0.5s;
}
</style>